<template>
  <div class="addPage">
    <!-- <el-page-header @back="goBack">
    </el-page-header> -->
    <el-form :model="addAssetsForm" :rules="addAssetsRules" ref="addAssetsRef" label-width="120px">
      <el-row>
        <!-- 基本属性区域 -->
        <p class="form_p">基本属性</p>
        <el-col :span="12">
          <el-form-item label="资产组" prop="assetsGroupId">
            <treeselect v-model="addAssetsForm.assetsGroupId" :multiple="false" :options="treeselectData" placeholder="请选择资产组"/>
          </el-form-item>
          <el-form-item label="资产名称" prop="name">
            <el-input v-model="addAssetsForm.name" placeholder="资产名称不能超过128字符"></el-input>
          </el-form-item>
          <el-form-item label="资产类型" prop="typeId">
            <treeselect v-model="addAssetsForm.typeId" :multiple="false" :options="treeselectoptions1" placeholder="请选择资产类型"/>
          </el-form-item>
          <el-form-item label="管理IP" prop="ipAddr">
            <el-input v-model="addAssetsForm.ipAddr" placeholder="请输入管理IP"></el-input>
          </el-form-item>
          <el-form-item label="地理位置" prop="location">
            <el-cascader
              v-model="addAssetsForm.location"
              :options="locationOptions">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="MAC地址" prop="mac">
            <el-input v-model="addAssetsForm.mac" placeholder="请输入MAC地址"></el-input>
          </el-form-item>
          <el-form-item label="序列号" prop="sn">
            <el-input v-model="addAssetsForm.sn" placeholder="请输入序列号"></el-input>
          </el-form-item>
          <el-form-item label="生产厂商">
            <el-select v-model="addAssetsForm.manufacturer" placeholder="请选生产厂商">
              <el-option
                v-for="item in option3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备联系人" prop="contact">
            <treeselect v-model="addAssetsForm.contact" :multiple="false" :options="treeselectoptions" placeholder="请选联系人"/>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="描述" prop="description">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="addAssetsForm.description">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 添加标签区域 -->
      <!-- 添加标签区域 -->
      <p class="form_p">资产标签</p>
      <el-form-item label="资产标签" prop="tag">
        <el-tag
          closable
          v-for="(item, i) in addAssetsForm.assetsTagEntities"
          :key="'tag-'+i"
          :color="item.color"
          @close="closeTag(i)">{{item.name}}</el-tag>
        <el-popover
          placement="bottom"
          width="700"
          trigger="click">
          <cs-table :table-data="currentTableData"
                    :table-label="tableLabel"
                    :isSelection="false"
                    @handleButton="handleButton"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    :table-option="tableOption"
                    class="table">
            <template slot="tag" slot-scope="scope">
              <el-tag type="small"
                v-for='(items, index) in scope.row.assetsTagEntity'
                :key='index'
                @click="Tag(items)"
                :color="items.color">{{items.name}}</el-tag>
            </template>
          </cs-table>
          <el-button slot="reference" @click="addtag">+ 添加标签</el-button>
        </el-popover>
      </el-form-item>
      <!-- 安全属性区域 -->
      <el-row>
        <p class="form_p">安全属性</p>
        <el-col :span="12">
          <el-form-item label="机密性" prop="confidentiality">
            <el-select v-model="addAssetsForm.confidentiality" placeholder="请选择机密性">
              <el-option
                v-for="item in option1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="可用性" prop="usability">
            <el-select v-model="addAssetsForm.usability" placeholder="请选择可用性">
              <el-option
                v-for="item in option1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="完整性" prop="integrity">
            <el-select v-model="addAssetsForm.integrity" placeholder="请选择完整性">
              <el-option
                v-for="item in option1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产价值" prop="value">
            <el-select v-model="addAssetsForm.value" placeholder="请选择资产价值">
              <el-option
                v-for="item in option1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="等保级别" prop="grade">
            <el-select v-model="addAssetsForm.grade" placeholder="请选择等保级别">
              <el-option
                v-for="item in option2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 接口区域 -->
      <!-- 接口区域 -->
        <p class="form_p">接口</p>
        <el-row v-for="(item, index) in addAssetsForm.assetsInterfaceEntities" :key="index">
          <el-col :span="12">
            <el-form-item label="IP" prop="interface_ip">
                <el-input v-model="item.ipAddr" placeholder="请输入接口IP地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="MAC" prop="interface_mac">
              <el-input v-model="item.macAddr" placeholder="请输入接口MAC地址"></el-input>
            </el-form-item>
         </el-col>
        </el-row>
      </el-form>
    </el-form>
    <el-row :gutter="80">
      <el-col :span="12" class="goBack_btn">
        <el-button class="button" @click="goBack">返回上一页</el-button>
      </el-col>
      <el-col :span="12">
        <el-button class="button" type="primary" @click="addAssetsData">转正式</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addEditData,
  getAssetsGroupListData,
  inquireTag,
  position
} from '@/api/assets/group.js'
import util from '@/utils/util'
import Treeselect from '@riophae/vue-treeselect'
import CsTable from '@/components/cs-table'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  data() {
    return {
      // 新增表单
      addAssetsForm: {
        assetsGroupId: null,
        id: '',
        name: '',
        ipAddr: '',
        mac: '',
        sn: '',
        manufacturer: '',
        location: '',
        contact: null,
        description: '',
        // typeId: null,
        confidentiality: '',
        usability: '',
        integrity: '',
        value: '',
        grade: '',
        status: '',
        typeId: null,
        assetsInterfaceEntities: [
          { ipAddr: '', macAddr: '' }
        ],
        assetsTagEntities: []
      },
      // 新增表单校验规则
      addAssetsRules: {
        name: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
        assets_type: [{ required: true, message: '请选择资产类型', trigger: 'blur' }],
        ip: [{ required: true, message: '管理IP', trigger: 'blur' }],
        mac: [{ required: true, message: '请输入MAC地址', trigger: 'blur' }],
        confidentiality: [{ required: true, message: '请选择机密性', trigger: 'blur' }],
        available: [{ required: true, message: '请选择机密性', trigger: 'blur' }],
        completeness: [{ required: true, message: '请选择机密性', trigger: 'blur' }],
        assetValue: [{ required: true, message: '请选择机密性', trigger: 'blur' }],
        protection: [{ required: true, message: '请选择机密性', trigger: 'blur' }]
      },
      id: '',
      value: '',
      option1: [
        { value: 0, label: '可忽略' },
        { value: 1, label: '低' },
        { value: 2, label: '中等' },
        { value: 3, label: '高' },
        { value: 4, label: '极高' }
      ],
      option2: [
        { value: 0, label: '不评级' },
        { value: 1, label: 'S1A1G1' },
        { value: 2, label: 'S2A2G2' },
        { value: 3, label: 'S3A3G3' },
        { value: 4, label: '不评级' },
        { value: 5, label: 'S1A1G1' },
        { value: 6, label: 'S2A2G2' },
        { value: 7, label: 'S3A3G3' },
        { value: 8, label: '不评级' },
        { value: 9, label: 'S1A1G1' }
      ],
      treeselectData: [],
      option3: [
        { value: '0', label: '奇治' },
        { value: '1', label: 'IBM' },
        { value: '2', label: '微软' },
        { value: '3', label: 'Vmware' },
        { value: '4', label: '华为' }
      ],
      treeselectoptions1: [
        { id: '0',
          label: '主机',
          children: [{
            id: '001',
            label: 'Linux'
          }, {
            id: '002',
            label: 'Windows'
          }]
        }, {
          id: '1',
          label: '数据库'
        }, {
          id: '2',
          label: '中间件'
        }],
      treeselectoptions: [
        { id: '0',
          label: '管理员组',
          children: [{
            id: '001',
            label: 'operator'
          }, {
            id: '002',
            label: 'auditor'
          }, {
            id: '003',
            label: 'admin'
          }]
        }],
      locationOptions: [],
      currentTableData: [],
      tableLabel: [
        { label: '资产组', param: 'groupName', align: 'center', isSelection: false, sortable: false, isShow: true, width: '150' },
        { label: '资产标签', param: 'tag', align: 'left', sortable: false, slot: true, isShow: true }
      ],
      tableOption: {}
    }
  },
  components: {
    Treeselect,
    CsTable
  },
  created() {
    this.addAssetsForm = this.$route.params.row
    this.getAssetsList()
    this.getposition()
  },
  methods: {
    goBack() {
      this.$router.push('/module/assets/reserve')
    },
    // 获取资产组数据
    getAssetsList() {
      getAssetsGroupListData().then((res) => {
        res.data.forEach(item => {
          item.label = item.groupName
        })
        this.treeselectData = util.formatDataToTree(res.data, 'id', 'pid')
      })
    },
    // 提交表单
    addAssetsData() {
      this.$refs.addAssetsRef.validate(valid => {
        if (!valid) return
        let tagIds = []
        tagIds = this.addAssetsForm.assetsTagEntities.map(item => {
          return item.id
        })
        const data = {
          assetsGroupId: this.addAssetsForm.assetsGroupId,
          id: this.addAssetsForm.id,
          name: this.addAssetsForm.name,
          typeId: this.addAssetsForm.typeId,
          ipAddr: this.addAssetsForm.ipAddr,
          mac: this.addAssetsForm.mac,
          sn: this.addAssetsForm.sn,
          manufacturer: this.addAssetsForm.manufacturer,
          location: this.addAssetsForm.location.toString(),
          contact: this.addAssetsForm.contact,
          description: this.addAssetsForm.description,
          confidentiality: this.addAssetsForm.confidentiality,
          usability: this.addAssetsForm.usability,
          integrity: this.addAssetsForm.integrity,
          value: this.addAssetsForm.value,
          grade: this.addAssetsForm.grade,
          assetsInterfaceEntities: this.addAssetsForm.assetsInterfaceEntities,
          tags: tagIds,
          status: this.addAssetsForm.status
        }
        if (this.id !== undefined) {
          addEditData(data).then((res) => {
            this.$router.push('/module/assets/reserve')
          })
        } else {
          // AddAssets(this.addAssetsForm).then((res) => {
          //   this.$router.push('/module/assets/reserve')
          //   this.$nextTick(() => {
          //     this.$refs.addAssetsRef.resetFields()
          //   })
          // })
          // this.$message.info('操作错误，请返回上一级重新选择！')
        }
      })
    },
    handleButton() {
    },
    handleSortChange() {
    },
    handleSelectionChange() {
    },
    addtag() {
      inquireTag().then((res) => {
        this.currentTableData = res.data
      })
    },
    Tag(val) {
      this.addAssetsForm.assetsTagEntities.push(val)
    },
    closeTag(i) {
      this.addAssetsForm.assetsTagEntities.splice(i, 1)
    },
    // 获取地理位置
    getposition() {
      position().then((res) => {
        res.data.forEach(item => {
          item.value = item.name
          item.label = item.name
        })
        this.locationOptions = util.formatDataToTree(res.data, 'id', 'pid')
      })
    }
  }
}
</script>

<style scoped>
  .addPage{
    height: 98%;
    padding: 0 40px;
  }
  .form_p{
    padding-bottom: 5px;
    border-bottom: #cfcfcf 1px solid;
  }
  .el-page-header{
    margin: 10px 0;
  }
  .el-select, .el-cascader{
    width: 100%;
  }
  .button{
    width: 100%;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    float: right;
  }
  .goBack_btn {
    padding-right: 0 !important;
  }
</style>
